<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>瀑布流</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: rgba(0, 0, 0, 0.1);
			}

			.Div_MainBox {
				width: 99.8%;
				display: flex;
			}

			.flowBox {
				min-width: 210px;
				width: 100%;

			}

			.Flow_ImageBox {
				margin: 4px;
				background-size: cover;
				background-position: center;
				border-radius: 10px;
				transition-duration: 0.3s;
			}

			.Flow_ImageBox:hover {
				box-shadow: rgba(0, 0, 0, 1) 0px 0px 15px 0px;
				transform: scale(1.01, 1.01);
			}
		</style>
	</head>
	<body>
		<div class="Div_MainBox">
			<div class="flowBox">
				<!-- <div class="Flow_ImageBox" style="background-image: url(image/image01.jpg);"></div> -->
			</div>
			<div class="flowBox">
				<!-- <div class="Flow_ImageBox" style="background-image: url(image/image03.jpg);"></div> -->
			</div>
		</div>

		<script src="./script/jquery-3.5.1.js"></script>
		<script>
			$(function() {

				//默认为两列
				var flowBoxHeightArr = new Array();
				flowBoxHeightArr[0] = 0;
				flowBoxHeightArr[1] = 0;

				//当前数据库图片编号(即下标)
				var serverImageId = 0;

				//浏览器更改大小事件
				$(window).resize(function() {
					WindowResize();
				});

				//浏览器更改大小事件
				function WindowResize() {
					// var windowsWidth = document.body.clientWidth;
					var windowsWidth = $(".Div_MainBox").width();
					var count = $(".flowBox").length;

					var needCount = Math.floor(windowsWidth / 210);
					if (needCount - count >= 0) {
						//添加列
						for (var i = 0; i < needCount - count; i++) {
							var div = $(
								"<div class='flowBox'><div class='Flow_ImageBox' style='background-image: url(image/image03.jpg);'></div></div>"
							);
							$(".Div_MainBox").append(div);
							//初始化列
							flowBoxHeightArr[flowBoxHeightArr.length] = 0;
							//图片加载
							if (i == 0) {
								CreateIMage();
							}
						}
					} else {
						//删除列
						for (var i = 0; i < (needCount - count) * -1; i++) {
							flowBoxHeightArr.pop($(".flowBox").length - 1);
							$(".flowBox").eq($(".flowBox").length - 1).remove();
						}
					}
				}
				WindowResize();

				//加载图片事件
				var imageIndex = 1;
				//这个地方应该输入一个参数, 参数为此次需要查询的图片个数
				function CreateIMage() {
					var imageList = [];
					//由此获取图片
					$.get("./DataJson/WaterfallLayoutImageList.json", {}, function(data) {
						imageList = data.ImageList;
						serverImageId = imageList.length;
						for (var i = 0; i < imageList.length; i++) {
							var divList = $(".flowBox");
							var curr = 0;
							for (var j = 1; j < flowBoxHeightArr.length; j++) {
								if (flowBoxHeightArr[curr] > flowBoxHeightArr[j]) {
									curr = j;
								}
							}
							var height = Math.round(Math.random() * 170) + 150;
							flowBoxHeightArr[curr] += height;
							var div = $("<div id='image" + imageIndex + "' class='Flow_ImageBox');'></div>");
							//加入文档
							div.css({
								"opacity": 0,
								"height": height,
								"backgroundImage": "url(image/" + imageList[i].ImagePath + ")",
								"transitionDuration":(Math.round(Math.random() * 10) + 5) /10 + "s"
							})
							$(".flowBox").eq(curr).append(div);

							//赋予可见
							let observer = new IntersectionObserver(
								function(entries, observer) {
									entries.forEach(u => {
										if (u.intersectionRatio > 0) {
											$(u.target).css("opacity","1");
										}
									})
								}, {
									threshold: 0.5
								});
							observer.observe(document.querySelector("#"+div.attr("id")));
							imageIndex++;
						}
					})
				}

				//浏览器滚动事件
				$(document).scroll(function() {
					var scroH = $(document).scrollTop();
					var count = flowBoxHeightArr.length;
					var cur = flowBoxHeightArr[0];
					var index = 0;
					for (var i = 0; i < count; i++) {
						if (cur > flowBoxHeightArr[i]) {
							cur = flowBoxHeightArr[i];
							index = i;
						}
					}
					//根据单次载入数量更改
					//载入数量越小 值越大
					//参考  16张 600
					//     100张 600
					if (cur < scroH + 700) {
						//自动加载
						CreateIMage();
						console.log("触发自动加载")
					}
					// console.log("滚动高度:" + scroH)
					// console.log("最低高度:" + cur + " , 下标" + index);
					//滚动高度 小于 最低高度
				})


				//如果还没有图片载入则触发一次
				if (serverImageId == 0) {
					CreateIMage();
				}

				// setInterval(function() {
				// 	console.log("当前个数:" + $(".Flow_ImageBox").length)
				// }, 1000)

			})
		</script>
	</body>
</html>
